<template>
    <div class="goodsSummary bg-white-pk">
        <div class="goodsPictureWrap">
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item v-for="(item, index) in goodsPictureList" :key="index">
                    <pk-img
                        :src="item"
                        width="100vw"
                        height="100vw">
                    </pk-img>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="infoListWrap list-item-pk light-border-bottom-pk">
            <div class="priceInfo font-size-12-pk item-content-pk">
                <div class="d-flex-base-pk text-red-pk">
                    <div>
                        ￥<span class="font-size-18-pk">{{goodsPrices[0]}}</span>
                        <span v-if="!priceRepeat">
                            -￥<span class="font-size-18-pk">{{goodsPrices[goodsPrices.length-1]}}</span>
                        </span>
                    </div>
                    <div style="margin-left: 20px">
                        分享赚￥{{saleRewards[0]}}
                        <span v-if="!rewardsRepeat">
                            -￥{{saleRewards[saleRewards.length-1]}}
                        </span>
                    </div>
                </div>
                <div class="text-light-pk text-line-center-pk">
                    价格￥{{originalPrices[0]}}
                    <span v-if="!originalRepeat">
                        -￥{{originalPrices[originalPrices.length-1]}}
                    </span>
                </div>
            </div>
            <div class="goodsName d-flex-cpb-pk">
                <div class="h15-pk">
                    {{goodsInfo.goodsName}}
                </div>
                <div class="favorite" :class="{active: isFavorite}" @click="goodsFavorite">
                    <van-icon :name="isFavorite?'star':'star-o'" size="20" />
                    <div>收藏</div>
                </div>
            </div>
            <div class="saleInfo d-flex-cpa-pk item-content-pk">
                <div>月销量{{goodsInfo.monthSellNum}}件</div>
                <div>
                    <van-icon class-prefix="pk-icon" name="like"></van-icon>
                    {{goodsInfo.loveNum}}点人赞
                </div>
            </div>
        </div>
        <pk-cell title="7天退换 . 48小时发货 . 假一赔十" is-link @click="handleAfterSalse"></pk-cell>
        <van-popup
                v-model="afterSalePop"
                position="bottom"
                closeable
                round
                style="min-height: 80vh">
            <div class="afterSale">
                <h3 class="text-center-pk text-red-pk">售后保障服务</h3>
                <ul>
                    <li>
                        <div class="text-black-pk">7天退换</div>
                        <div class="text-light-pk">满足相应条件时，消费者可申请七天无理由退换货服务。</div>
                    </li>
                    <li>
                        <div class="text-black-pk">48小时发货</div>
                        <div class="text-light-pk">若超时未发货，消费者将会收到相应的补偿。</div>
                    </li>
                    <li>
                        <div class="text-black-pk">假一赔十</div>
                        <div class="text-light-pk">若核实商品为假冒或假货，消费者将会获得该商品实际 支付金额的10倍赔偿。</div>
                    </li>
                </ul>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import PkCell from "../../components/PkCell";
    import PkImg from "../../components/PkImg";
    export default {
        name: 'goodsSummary',
        props: {
            goodsInfo: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            goodsPictureList: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        components: {PkImg, PkCell},

        data() {
            return {
                isFavorite: this.goodsInfo.isFavorite,
                goodsPrices: [],
                priceRepeat: false,
                saleRewards: [],
                rewardsRepeat: false,
                originalPrices: [], //商品展示价
                originalRepeat: false,
                afterSalePop: false
            }
        },
        mounted() {
            if(this.goodsId) {
                this.initData()
            }
        },
        computed: {
            goodsId() {
                return this.goodsInfo.goodsId
            }
        },
        watch: {
            goodsId(val) {
                if(val) {
                    this.initData()
                }
            }
        },
        methods: {
            initData() {
                this.isFavorite = this.goodsInfo.isFavorite;
                //获取价格
                this.goodsInfo.goodsAttrList.forEach(item => {
                    this.goodsPrices.push(item.goodsPrice);
                    this.saleRewards.push(item.saleReward);
                    this.originalPrices.push(this.goodsInfo.salePrice == "1" ? item.basePrice : item.goodsPrice);
                });
                this.goodsPrices = this.goodsPrices.sort( (a,b) => {
                    return a-b
                });
                this.saleRewards = this.saleRewards.sort( (a,b) => {
                    return a-b
                });
                this.originalPrices = this.originalPrices.sort( (a,b) => {
                    return a-b
                });
                this.priceRepeat = this.goodsPrices[0] == this.goodsPrices[this.goodsPrices.length-1]
                this.rewardsRepeat = this.saleRewards[0] == this.saleRewards[this.saleRewards.length-1]
                this.originalRepeat = this.originalPrices[0] == this.originalPrices[this.originalPrices.length-1]
            },
            goodsFavorite() {
                this.$api.userFavorite({
                    isFavorite: this.isFavorite ? "0" : "1",
                    type: "1",
                    userFavoriteId: this.goodsId
                }).then( res => {
                    let result = this.$resResult(res);
                    if(result) {
                        this.isFavorite = ! this.isFavorite;
                    }
                })
            },
            handleAfterSalse() {
                this.afterSalePop = true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goodsSummary {
        .goodsPictureWrap {
            line-height: 0;
        }
        .infoListWrap{
            padding-top: 5px;
        }
        .goodsName {
            .favorite {
                color: var(--light-text-color);
                width: 80px;
                text-align: center;
            }
            .favorite.active {
                color: var(--red-color);
            }
        }
        .afterSale {
            margin: 15px 30px;
            ul {
                color: var(--red-color);
                list-style-type: disc;
                font-size: 14px;
                li {
                    padding-bottom: 10px;
                }
            }
        }
    }
</style>
